import React, { Component } from 'react';
import { connect, history } from 'umi';
import { message } from 'antd';
import NoticeIcon from '../NoticeIcon';
import styles from './index.less';

import commonPkg from '@/utils/commonPkg';
const { _, moment } = commonPkg;

@connect(({ user, letter, DemandComplainSelect }) => ({
  user: user.user,
  letter,
  DemandComplainSelect,
}))
export default class GlobalHeaderRight extends Component {
  componentDidMount() {
    this.getlist();
    this.time = setInterval(() => {
      this.getlist();
    }, 10000);
  }

  componentWillUnmount = () => {
    clearInterval(this.time);
  };

  getlist = async () => {
    var rs = await this.props.dispatch({ type: 'letter/getLetterAll' });
    if (rs.code == 200) {
      var list = rs.data.map((item, i) => {
        return {
          ...item,
          avatar:
            'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
          datetime: moment(item.createTime).format('YYYY-MM-DD HH:mm:ss'),
          id: item.id,
          key: item.id,
          // read: true,
          title: this.getTitle(item.type, item.realmStatus),
          type: 'notification',
        };
      });

      this.props.dispatch({
        type: 'letter/setState',
        payload: {
          list: list,
        },
      });
    }
  };

  getTitle = (type, realmStatus) => {
    const { letterStatusMap } = this.props.DemandComplainSelect;
    var title = '';
    var item = letterStatusMap[type];
    if (item && item[realmStatus]) {
      title = item[realmStatus].title;
    }
    return title;
  };

  // itme Click
  changeReadState = async clickedItem => {
    // 跳转到我的代办
    history.push('/backlog');
    await this.props.dispatch({
      type: 'letter/letterDetails',
      payload: { id: clickedItem.id },
    });
    this.getlist();
  };

  // 全部已读
  handleNoticeClear = async (title, key) => {
    await this.props.dispatch({ type: 'letter/letterUnread' });
    this.getlist();
  };

  render() {
    const { onNoticeVisibleChange, letter } = this.props;
    const { list } = letter;

    var readList = [];
    var unreadList = [];
    list.forEach(item => {
      if (item.status == 0) {
        readList.push(item);
      } else {
        unreadList.push(item);
      }
    });

    return (
      <NoticeIcon
        className={styles.action}
        count={readList.length}
        onItemClick={item => this.changeReadState(item)}
        loading={true}
        clearText="全部已读"
        viewMoreText="查看更多"
        clearClose
        onClear={this.handleNoticeClear}
        onPopupVisibleChange={onNoticeVisibleChange}
        onViewMore={() => {
          // 查看更多
        }}
      >
        <NoticeIcon.Tab
          tabKey="1"
          count={readList.length}
          list={readList}
          title="未读"
          emptyText="没有未读通知"
          showViewMore
        />
        <NoticeIcon.Tab
          tabKey="2"
          count={unreadList.length}
          list={unreadList}
          title="已读"
          emptyText="没有已读通知"
          showViewMore
        />
        <NoticeIcon.Tab
          tabKey="3"
          count={list.length}
          list={list}
          title="全部"
          emptyText="没有通知"
          showViewMore
        />
      </NoticeIcon>
    );
  }
}
